﻿@using System.Web.Mvc.Html
@{
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
    var likes = ViewBag.likeNumberofPost;
    var author = ViewBag.author;
    var comments = ViewBag.commentsOfPost;
    var postDetail = ViewBag.postDetailInfo;
    ViewContext.Controller.ViewBag.ViewComment = ViewBag.ListComment;
    ViewContext.Controller.ViewBag.paging = ViewBag.page;
    ViewContext.Controller.ViewBag.counting = ViewBag.count;
    var statusreturn = HttpContext.Current.Session["status2return"];
    if (statusreturn == null) { statusreturn = "2"; }     
}
@*google map script*@
<link href="/Content/Bootstrap/bootstrap.min.css?cdv=1" type="text/css" rel="stylesheet" />
<link href="/Content/Bootstrap/bootstrap-responsive.min.css?cdv=1" type="text/css"
    rel="stylesheet" />
<link href="/Content/Bootstrap/bootstrap-image-gallery.min.css?cdv=1" type="text/css"
    rel="stylesheet" />
<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.24.js" type="text/javascript"></script>
<script src="../../Scripts/dialog.js" type="text/javascript"></script>
<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="../../Content/Styles/page.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery.aw-showcase.js" type="text/javascript"></script>
<link href="../../Content/Styles/slideimage.css" rel="stylesheet" type="text/css" />
<link href="../../Content/Styles/page.css" rel="stylesheet" type="text/css" />
<link href="../../Content/Styles/button.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    bajb_backdetect.OnBack = function () {
        alert('You clicked it!');
    }
</script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
<script type="text/javascript">

    var Chmap;

    function initializes() {
        //alert('go1');
        var xtext = document.getElementById("ordinate").innerHTML;
        if (xtext.length > 0) {
            var textSplit = xtext.split(",");
            //declare points on Map
            var pointCenter = null;
            pointCenter = new google.maps.LatLng(textSplit[0], textSplit[1]);
            //alert('g4');
            //declare Map properties
            var ChmapProp = {
                center: pointCenter,
                zoom: 12,
                //disableDefaultUI:false, //dissable UI control
                panControl: true,
                zoomControl: true,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.MEDIUM,
                    position: google.maps.ControlPosition.BOTTOM_LEFT
                },
                mapTypeControl: true,
                scaleControl: false,
                streetViewControl: false,
                overviewMapControl: false,
                rotateControl: false,
                disableDoubleClickZoom: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            Chmap = new google.maps.Map(document.getElementById("MapHouse"), ChmapProp);
            var marker = new google.maps.Marker({
                position: pointCenter,
                map: Chmap
            });
        }

    } //end initialize   
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript">
    $(function () {
        $("#tabinfo").tabs();
        $("#tabinfo").tabs({
            event: "mouseover"
        });
        $('#tabinfo').tabs({ selected: 2 });
    });
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#showcase").awShowcase(
            {
                content_width: 600,
                content_height: 470,
                fit_to_parent: false,
                auto: true,
                interval: 3000,
                continuous: false,
                loading: true,
                tooltip_width: 200,
                tooltip_icon_width: 32,
                tooltip_icon_height: 32,
                tooltip_offsetx: 18,
                tooltip_offsety: 0,
                arrows: true,
                buttons: true,
                btn_numbers: true,
                keybord_keys: true,
                mousetrace: false, /* Trace x and y coordinates for the mouse */
                pauseonover: true,
                stoponclick: false,
                transition: 'hslide', /* hslide/vslide/fade */
                transition_delay: 0,
                transition_speed: 500,
                show_caption: 'onload', /* onload/onhover/show */
                thumbnails: false,
                thumbnails_position: 'outside-last', /* outside-last/outside-first/inside-last/inside-first */
                thumbnails_direction: 'vertical', /* vertical/horizontal */
                thumbnails_slidex: 1, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
                dynamic_height: false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
                speed_change: true, /* Set to true to prevent users from swithing more then one slide at once. */
                viewline: false, /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
                custom_function: null /* Define a custom function that runs on content change */
            });
        //Hoangdx Code paging
        if(@ViewContext.Controller.ViewBag.paging != null && @ViewContext.Controller.ViewBag.counting != null){
            pages(@ViewContext.Controller.ViewBag.paging, @ViewContext.Controller.ViewBag.paging, @ViewContext.Controller.ViewBag.counting);
        }
        else{
            pages(@ViewBag.page, @ViewBag.page, @ViewBag.count);
        }
    });
 
    //Hoangdx code paging
    function loadpages(page) {
        var url = "/Comments/Paging";
        $.ajax({
            type: "Get",
            url: url,
            data: { id: page }, // them bien neu muon truyen them
            success: function (data) {
                $("#comment").html(data);
                //load();
            }
        });
    }
</script>
<!--script approve, reject post -->
<script type="text/javascript">
    $(function() {
        var reason = $("#reasonreject"),
            tips = $(".validateTips");
            
        function updateTips( t ) {
            tips
                .text( t )
                .addClass( "ui-state-highlight" );
            setTimeout(function() {
                tips.removeClass( "ui-state-highlight", 1500 );
            }, 500 );
        }        

        $( "#dialog-form-confirmreject" ).dialog({
            autoOpen: false,
            height: 300,
            width: 450,
            modal: true,
            buttons: {
                "Reject&Sendmail": function() {
                    var reasontext = $("#reasonreject").val();
                        if (reasontext == "") {
                            $("div.errorReason").css("display", "block");
                            $("div.errorReason").html("Please input reason!");
                        }else {
                            RejecttPost(@postDetail.PostID, '@postDetail.Title', '@postDetail.Email', reasontext);
                        $( this ).dialog( "close" );
                        }
                        
                    
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                reason.val( "" ).removeClass( "ui-state-error" );
            }
        });
        
    });
    function RejecttPost2() {
            $( "#dialog-form-confirmreject" ).dialog( "open" );
        }
    function AcceptPost(postId,title,contactmail) {
        var url = "/ManagePosts/AcceptPost";
        $.ajax({
            type: "Post",
            url: url,
            data: { postId: postId }, // them bien neu muon truyen them
            success: function (data) {
                window.location.href = "/ManagePosts/ManagePost?status="+@statusreturn;
            }
        });
        MailAcceptPost(title, contactmail);
    }
    
    function RejecttPost(postId,title,contactmail,reasontext) {
        var url = "/ManagePosts/RejectPost";
             $.ajax({
            type: "Post",
            url: url,
            data: { postId: postId }, // them bien neu muon truyen them
            success: function (data) {
                window.location.href = "/ManagePosts/ManagePost?status="+@statusreturn;
            }
        });
        MailRejectPost(title, contactmail, reasontext);
    }

    function MailAcceptPost(title, contactmail) {
        var url = "/Sendmail/SendmailAccept";
        $.ajax({
            type: "Post",
            url: url,
            data: { title: title, contactmail: contactmail },
            success: function(data) {
                //alert("tessendmail");
            }
        });
    }
    
    function MailRejectPost(title, contactmail, reasontext) {
        var url = "/Sendmail/SendmailReject";
        $.ajax({
            type: "Post",
            url: url,
            data: { title: title, contactmail: contactmail, reason: reasontext },
            success: function(data) {
                //alert("tessendmail");
            }
        });
    }
    
    function DeletePostcf(postId){
        $(document).each(function () {
            $("#dialog-form-confirmDeletePost").dialog({
                resizable: false,
                height: 140,
                modal: true,
                buttons: {
                    "Delete": function () {
                        alert("1");
                        DeletePost(postId);
                        $(this).dialog("close");
                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                }
            });
        });
    }
    function DeletePost(postId) {
        var url = "/ManagePosts/DeletePost";
        $.ajax({
            type: "Post",
            url: url,
            data: { postId: postId }, // them bien neu muon truyen them
            success: function (data) {
               
                
                alert("ok");
                window.location.href = "/ManagePosts/ManagePost?status="+@statusreturn;
            }
        });
    }
</script>
<!--End script approve, reject post -->
<style type="text/css" media="screen">
    /*body { font: 0.8em Arial, sans-serif; } */
    .contentmenu
    {
        margin-left: -30px;
    }
    .menutab
    {
        padding: 0;
        clear: both;
    }
    .menutab li
    {
        display: inline;
    }
    .menutab li a
    {
        background: #ccf;
        padding: 10px;
        float: left;
        border-right: 1px solid #ccf;
        border-bottom: none;
        text-decoration: none;
        color: #000;
        font-weight: bold;
    }
    .menutab li.active a
    {
        background: #eef;
    }
    .menutab ul
    {
        margin: 0px 5px 9px 0px !important;
    }
    .content
    {
        float: left;
        clear: both;
        border: 1px solid #ccf;
        border-top: none;
        border-left: none;
        background: whitesmoke;
        padding: 10px 20px 20px;
        width: 660px;
        height: 650px;
        font-weight: bold;
    }
    .leftlabel
    {
        margin-right: 0px;
    }
    /* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */
    
    #likeNo
    {
        position: relative;
        padding: 8px;
        color: #484D44;
        background: #d2d6a8 !important; /* css3 */
        background: -webkit-gradient(linear, 0 0, 0 100%, from(#fcfcfc), to(#fcfcfc));
        background: -moz-linear-gradient(#fcfcfc, #fcfcfc);
        background: -o-linear-gradient(#fcfcfc, #fcfcfc);
        background: linear-gradient(#fcfcfc, #fcfcfc);
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        box-shadow: 2px 2px 0 #c2c2c2;
        font-weight: bold;
    }
    .border-image
    {
        position: absolute;
        left: 10px;
        bottom: 10px;
    }
    .boderimg
    {
        padding: 3px;
        border-style: solid;
        border-width: 1px;
        border-color: #DDD #CACACA #ACACAC;
        line-height: 0;
        display: inline-block;
        background-color: white;
        position: relative;
        -webkit-border-radius: 2px;
        float: left;
    }
    .imgWishlist
    {
        display: block;
        position: absolute;
        top: 115px;
    }
    .status
    {
        text-decoration: none;
        display: inline-block;
        color: white;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: 900;
        padding: 4px 4px;
        font-size: 15px;
        width: 100px;
        text-align: center;
        float: left;
        cursor: pointer;
    }
    .status:hover
    {
        background-color: #EF411A;
    }
    
    fieldset
    {
        display: none;
    }
    #slideimage
    {
        width: 620px;
    }
    #contactinfo
    {
        width: 300px;
    }
    #likeinfo
    {
        width: 260px;
    }
    #contactdetail
    {
        width: 260px;
    }
    .ui-dialog .ui-state-error
    {
        padding: .3em;
    }
    .validateTips
    {
        border: 1px solid transparent;
        padding: 0.3em;
    }
    .deletecomment
    {
        margin-left: 20px;
        color: blue;
    }
    
    .errorReason {
        display: none;
        color: red;
    }
</style>
@*Body*@
<div class="detailcontainer">
    @*   tieu de*@
    <div class="headdetail">
        <div id="title" style="font-weight: bold; font-size: 20px; color: #333">@postDetail.Title</div>
        @*        <a href="@Url.Action("Index", "Search", new { province = postDetail.ProvinceID, district = districtId })" style="margin-right: 10px; margin-top: 10px; float: right">Back to list result</a>*@
        <p id="backtolist" style="margin-right: 10px; margin-top: -10px; float: right; cursor: pointer;
                                                                                                                                      text-decoration: underline; color: lightskyblue; font-weight: bold">
            Back to list result</p>
    </div>
    @*    slide*@
    <div id="slideimage" class="detailcontainer">
        <div id="showcase" class="showcase">
            <!-- Each child div in #showcase represents a slide -->
            @foreach (var image in ViewBag.imagesOfPost)
            {
                <div class="showcase-slide">
                    <!-- Put the slide content in a div with the class .showcase-content. -->
                    <div class="showcase-content">
                        <img src= @image.ImageName alt="../../Content/images/imageUnAvailable.png" style="max-width: 100%" />
                    </div>
                </div>	
            }
        </div>
    </div>
    @*like,wishlist*@
    <div id="contactinfo" class="detailcontainer">
        <div id="likeinfo" class="detailcontainer">
            <div class="row">
                <span>No. Like: @likes </span>
            </div>
            <div class="row">
                TimeCreate: @postDetail.TimeCreated
            </div>
            <div class="row">
                PostAvailable: @postDetail.PostAvailable
            </div>
            @{
                if (postDetail.Status == 1 )
                {
                    <style type="text/css">
                        #likeinfo {
                            height: 180px;
                        }
                    </style>
                    ;
                    <div class="row">
                        AcceptedBy: @postDetail.UserReview 
                       
                    </div>
                    <div class="row"> AcceptedTime: @postDetail.ReviewedTime</div>
                }
                if (postDetail.Status == -1 )
                {
                    <style type="text/css">
                        #likeinfo {
                            height: 180px;
                        }
                    </style>
                    ;
                    <div class="row">
                        RejectedBy: @postDetail.UserReview 
                         
                    </div>
                <div class="row">RejectedTime: @postDetail.ReviewedTime</div>
                }
            }
            <div class="row">
                @{
                    if (postDetail.Status == 0)
                    {
                    <div class="status" onclick="AcceptPost(@postDetail.PostID,'@postDetail.Title','@postDetail.Email')" style="background: forestgreen;">
                        Accept</div>
@*<div class="status" onclick="RejecttPost(@postDetail.PostID,'@postDetail.Title','@postDetail.Email')" style="background: firebrick;">
                        Reject</div>*@
                    <div class="status" onclick="RejecttPost2()" style="background: firebrick;">
                        Reject</div>
                    }
                    else if (postDetail.Status == 1)
                    {
@*<div class="status" onclick="RejecttPost(@postDetail.PostID,'@postDetail.Title','@postDetail.Email')" style="background: firebrick;">
                        Reject</div>*@
                    <div class="status" onclick="RejecttPost2()" style="background: firebrick;">
                        Reject</div>
                    }
                    else if (postDetail.Status == -1)
                    {
                    <div class="status" onclick="AcceptPost(@postDetail.PostID,'@postDetail.Title','@postDetail.Email')" style="background: forestgreen;">
                        Accept</div>
                        if (ViewBag.timeRejectedPost >= 10)
                        {
                            <div class="status" onclick="DeletePostcf(@postDetail.PostID)" style="background: firebrick;">
                        Delete</div>        
                        }
                    }
                }
            </div>
        </div>
        <div class="row">
            <div id="contactdetail" class="detailcontainer" style="position: relative">
                <div class="field">
                    @* <span class="leftlabel">Contact To</span>*@ <span class="leftlabel" style="margin-bottom: 10px">
                        <img alt="#" src="../../Content/images/icons/team_icon.jpg" style="width: 20px; height: 20px" />
                    </span>
                    <div class="contactfield">@postDetail.ContactName</div>
                </div>
                <div class="field">
                    <span class="leftlabel" style="margin-bottom: 10px">
                        <img alt="#" src="../../Content/images/icons/dt.jpg" style="width: 20px; height: 20px" />
                    </span>
                    <div class="contactfield">
                        (+84) @postDetail.MobilePhone</div>
                </div>
                <div class="field">
                    <span class="leftlabel" style="margin-bottom: 10px">
                        <img alt="#" src="../../Content/images/icons/dtban.jpg" style="width: 20px; height: 20px" />
                    </span>
                    <div class="contactfield">
                        (+84) @postDetail.TelePhone</div>
                </div>
                <div class="field">
                    <span class="leftlabel" style="margin-bottom: 10px">
                        <img alt="#" src="../../Content/images/icons/email.jpg" style="width: 20px; height: 20px" />
                    </span>
                    <div class="contactfield">@postDetail.Email</div>
                </div>
                <div class="border-image">
                    @if (author.AvatarPicture != null)
                    {
                        <div class="boderimg">
                            <img alt="#" src= "@author.AvatarPicture" style="width: 100px; height: 100px"/>
                        </div>
                    }
                    <div style="float: left; margin-left: 10px; margin-top: 30px;">
                        <span class="leftlabel" style="float: left; margin-left: 10px;">Posted by</span>
                        <span class="leftlabel" style="clear: left; margin-left: 10px; color: #1696C6; font-size: 20px">@author.Username</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @*  Tab information*@
    <div id="tabinfo" class="detailcontainer">
        <ul>
            <li><a href="#houseDetail">Details</a></li>
            <li><a href="#description">Description</a></li>
            <li><a href="#position">Location</a></li>
            <li><a href="#comment">Comments</a></li>
        </ul>
        <div id="comment" class="content">
            @{Html.RenderPartial("/Views/Comments/Index.cshtml");}
        </div>
        <div id="position" class="content">
            <div>
                Address Detail : @postDetail.AddressDetail</div>
            <br />
            <div>
                Province : @postDetail.Province</div>
            <br />
            <div>
                District : @postDetail.District</div>
            <br />
            <div id="ordinate" style="display: none;">@postDetail.Ordinate</div>
            <div id="MapHouse" style="width: 660px; height: 500px;">
            </div>
        </div>
        <div id="houseDetail" class="content">       
        @{
            var hasgara = @postDetail.HasGara + ".png";
            var hasgarden = @postDetail.HasGarden + ".png";
            var haschicken = @postDetail.HasKitchen + ".png";

            }
        <table style="border: 0">
            <tr>  <td>House type : </td>
                <td>@postDetail.TypeOfHouse /</td>
                 @if (ViewBag.listTypeHomestay != null)
                 {
                    <td>
                        @foreach (var i in ViewBag.listTypeHomestay)
                        {
                            <span>@i</span>
                            <span>  </span>
                        }
                    </td>
                 }</tr>
            <tr>
                <td>
                    Price a day
                </td>
                @if (postDetail.PricePerDay != 0)
                {
                    <td style="color: green">@postDetail.PricePerDay $
                    </td>
                }
                else
                {
                    <td style="color: green">
                        N/A
                    </td>
                }

              

            </tr>
            <tr>
                <td>
                    Price a week
                </td>
                @if (postDetail.PricePerWeek != 0)
                {
                    <td style="color: green">@postDetail.PricePerWeek $
                    </td>
                }
                else
                {
                    <td style="color: green">
                        N/A
                    </td>
                }
               
            </tr>
            <tr>
                <td>
                    Price a month
                </td>
                @if (postDetail.PricePerMonth != 0)
                {
                    <td style="color: green">@postDetail.PricePerMonth $
                    </td>
                }
                else
                {
                    <td style="color: green">
                        N/A
                    </td>
                }
            </tr>
            <tr>
                <td>
                    Area
                </td>
                <td style="font-weight: normal">
                    @postDetail.Area m2
                </td>
                <td>
                    Storey
                </td>
                <td style="font-weight: normal">
                    @postDetail.Storey
                </td>
            </tr>
            <tr>
                <td>
                    Has Gara
                </td>
                <td>
                    <img src="../../Content/images/icons/@hasgara"/>
                </td>
                <td>
                    Number of Bedroom
                </td>
                <td style="font-weight: normal">@postDetail.NumBadroom
                </td>
            </tr>
            <tr>
                <td>
                    Has Garden
                </td>
                <td>
                    <img src="../../Content/images/icons/@hasgarden"/>
                </td>
                <td>
                    Number of WC/Bathroom
                </td>
                <td style="font-weight: normal">@postDetail.NumOfWC
                </td>
            </tr>
            <tr>
                <td>
                    Has Kitchen
                </td>
                <td>
                    <img src="../../Content/images/icons/@haschicken"/>
                </td>
                <td>
                    Number of SittingRoom
                </td>
                <td style="font-weight: normal">@postDetail.NumSittingRoom
                </td>
            </tr>
        </table>
          </div>   
        <div id="description" class="content">       
     <div class="detailcontainer" style="width: 600px; height: 300px; padding: 10px; margin-left: 10px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               font-weight: normal;background: white; overflow:auto">
                @Html.Raw(postDetail.Content)
            </div>
    </div>
    </div>
</div>
<div id="dialog-form-confirmreject" title="Reason to reject this post">
    <textarea id="reasonreject" cols="4" rows="8" style="width: 400px" placeholder="inpt reason here..."></textarea>
    <div class="errorReason"></div>
</div>
<div id="dialog-form-confirmDeletePost" title="Delete A Post" style="display: none">
                        <p style="color: Red">
                            <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
                            Are you sure to delete this post?</p>
                    </div>
<script type="text/javascript">
    initializes("detailcontainer");
    $(function () {
        $("#backtolist").click(function () {
            history.go(-1);
        });

    });
  
</script>
